<template>
  <div class="page">
    <div class="page-title">排污执行报告</div>

    <div class="page-content">
      <div class="page-content-screen">
        <div class="screen">
          <vc-filter :menus="screen">
            <template #search>
              <search-input :width="230" v-model="searchTxt" title="关键字" placeholder="请输入企业名称或许可证编号" @enter="handlerInput" @clear="handlerInput" />
            </template>
            <div class="total">共计<sapn style="color: rgba(255, 89, 89, 1)">&nbsp;{{ totalNum }}&nbsp;</sapn>条</div>
          </vc-filter>
        </div>
      </div>
      <div>
        <vc-table
          :loading="loading"
          :tableData="tableData"
          :columns="columns"
          :total="totalNum"
          :pageSize="PAGE_SIZE"
          :pageNum="queryData.pageNum"
          :defaultSort="{ field: 'dischargePermitNumber', order: 'desc' }"
          @page-change="handleCurrentChange"
          @sort-change="sortChange"
        />
      </div>
      <vc-dialog v-model="showDetailModal" :title="`更多执行报告${detailsTableData.length}`" width="800">
        <div class="detail-table">
          <vc-table :maxHeight="350" :defaultSort="{ field: 'noticeDate', order: 'desc' }" :columns="detailsColumn" :tableData="detailsOrderTableData" @sort-change="dialogSortChange" />
        </div>
      </vc-dialog>
    </div>
  </div>
</template>

<script lang="ts" setup>
import searchInput from '@/components/page-search/index.vue';
import { getPermitImplementationReport } from '../apis';
import { useScreen } from './useScreen';
import { useTable } from './useTable';
import { usePage } from '@/use/usePage';

const { PAGE_SIZE, screen, queryData } = useScreen();

const { loading, run } = useRequest(getPermitImplementationReport, {
  defaultParams: [queryData],
  onSuccess: (data) => {
    tableData.value = data.values;
    totalNum.value = data.total;
  },
  onError: () => {
    tableData.value = [];
  }
});

const detailsOrderTableData = ref<any>([]);

const dialogSortChange = async (params) => {
  const { order } = params;
  const data = JSON.parse(JSON.stringify(detailsTableData.value));

  if (order === 'asc') {
    // 接口默认按类型和日期降序，升序翻转数组即可
    detailsOrderTableData.value = data.reverse();
  } else {
    detailsOrderTableData.value = data;
  }
};

const { columns, showDetailModal, detailsColumn, detailsTableData } = useTable();
const { tableData, totalNum, searchTxt, handlerInput, handleCurrentChange, sortChange } = usePage(queryData, run);


watch(
  () => showDetailModal.value,
  () => {
    detailsOrderTableData.value = JSON.parse(JSON.stringify(detailsTableData.value));
  }
);
</script>

<style lang="scss" scoped>
@import '../index.scss';
</style>
